<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>食品安全科普平台</title>
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
		<link rel="stylesheet" type="text/css" href="layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/APlayer.min.css"/>
		
	</head>
	<body>
		<div id="app">
			<!-- 顶部滚动进度条 -->
					<div class="progress"></div>
					<div class="top">
						<div class="box">
							<a href="index.html">首页</a>
							<a href="#">动态</a>
							<a href="#">音乐盒</a>
							<a href="#">我的笔记</a>
							<div class="dropdown">
							  <span class="dropdown_dow">常用工具</span>
							  <div class="dropdown-content ">
								<a href="#">列表1</a>
								<a href="#">列表2</a>
								<a href="#">列表3</a>
							  </div>
							</div>
							<a href="#">我的游戏</a>
							<a href="#">语录集</a>
							<a href="#">时间轴</a>
							<a href="#">留言板</a>
							<a href="link.html">友情链接</a>
						</div>
						<!-- <div class="QQ">
							<img src="img/QQ-logo.png" alt="">
						</div> -->
					</div>
					<!-- 中部图片and头像 -->
					<div class="content">
						<div class="wall">
							<div class="layui-carousel" id="lunbo" >
							  <div carousel-item>
							    <img src="img/wp_02-1024x288.jpg" >
							    <img src="img/banner3.jpg" >
							  </div>
							</div>
							
							<p>&nbsp;</p>
							<div class="head ">
								<img :src="user.headImg" alt="">
							</div>
							<div class="link" style="height: 6vh;width: 10vw;">
								<div><a href="https://www.jianshu.com/u/03ecacbb2a42" target="_blank"><img src="img/jianshu.jpg"  alt=""></a></div>
								<div><a href="https://gitee.com/cwljxf" target="_blank"><img src="img/mayun.jpg" alt=""></a></div>
								<div><a href="https://github.com/chenweilong1713/" target="_blank"><img src="img/github.jpg" alt=""></a></div>
							</div>
						</div>
					</div>
					<!-- 中下部门，分为三份 -->
					<div class="below" >
						<div  class="below-left" >
							<div style="background-color: #FFFFFF;">
								<br>
								<div>
									<div id="circle" style="background-color: #FC625D;"></div>
									<div id="circle" style="background-color: #FDBC40;"></div>
									<div id="circle" style="background-color: #35CD4B;"></div>
									<div class="subtitle">
										&nbsp;&nbsp;点击排行
									</div>
								</div>
								<br>
								<!-- 点赞排行列表 -->
								
								<div class="parcel" v-for="(value, key, index) in HeatRankingArticle" >
									<a href="#">
										<div class="seniority" @click="jump(value)">
												<div class="left">
													<!-- 用户头像 -->
													<img :src="value.authorheaderImg" alt="">
												</div>
												<div class="right">
													<p>{{value.title}}</p>
													<p>{{value.synopsis}}</p>
													<p>
													<i><img src="img/header.png"><span class="Small_text_decoration">{{value.author}}</span></i>
													<span><i><img src="img/date.png"><span class="Small_text_decoration">{{value.dateline}}</span></i></span>
													</p>
												</div>
										</div>
									</a>
								</div>
								<br>
							</div>
							<br>
							<div style="background-color: #FFFFFF;">
								<br>
								<div>
									<div id="circle" style="background-color: #FC625D;"></div>
									<div id="circle" style="background-color: #FDBC40;"></div>
									<div id="circle" style="background-color: #35CD4B;"></div>
									<div class="subtitle">
										&nbsp;&nbsp;最新发布
									</div>
								</div>
								<br>
								<!-- 排行列表 -->
								
								<div class="parcel" v-for="(value, key, index) in Latest_article">
									<a href="#" >
										<div class="seniority">
												<div class="left">
													<img :src="value.authorheaderImg" alt="">
												</div>
												<div class="right">
													<p>{{value.title}}</p>
													<p>{{value.synopsis}}</p>
													<p>
													<i><img src="img/header.png"><span class="Small_text_decoration">{{value.author}}</span></i>
													<span><i><img src="img/date.png"><span class="Small_text_decoration">{{value.dateline}}</span></i></span>
													</p>
													
												</div>
										</div>
									</a>
								</div>
								
								
								
								<br>
							</div>
							
						</div>
						<div class="below-centon animated slideInUp" >
							<!-- 通知轮播 -->
							<div class="layui-carousel" id="inform"  style="background-color:rgb(255,255,255)">
							  <div carousel-item>
								<div style="background-color:#FFFFFF;height: 100%;">
									<div style="height: 100%;width: 40px;background-color: #F1746B;border-radius:0px;float: left;text-align: center;">
										<div style="margin-top: 1.18vh;">
											<i class="layui-icon layui-icon-notice" style="color: #FFFFFF;"></i>
										</div>
									</div>
									<div style="margin:1.1vh;text-align: center;">
										<p style="letter-spacing:1px">我的食品安全平台正式上线!</p>
									</div>
								</div>
								
								<div style="background-color:#FFFFFF;height: 100%;">
									<div style="height: 100%;width: 40px;background-color: #F1746B;border-radius:0px;float: left;text-align: center;">
										<div style="margin-top: 1.18vh;">
											<i class="layui-icon layui-icon-notice" style="color: #FFFFFF;"></i>
										</div>
									</div>
									<div style="margin:1.1vh;text-align: center;">
										<p style="letter-spacing:1px">欢迎大家参观学习! </p>
									</div>
								</div>
							  </div>
							</div>
							<br>
			<!-- ********************************************************************************************************************* -->				
							<!-- 主页动态列表,分为图文，音乐，视频 -->
							<!-- <a href="#"> -->
								<div style="background-color: #FFFFFF;" v-for="(value, key, index) in objectArray">
									<br>
									<div class="dynamic" @click="jump(value)">
										<div>
											<img class="dynamic_head" src="img/people.jpg" alt="">
										</div>
										<div>
											&nbsp;&nbsp;{{value.dateline}}
										</div>
										<br><br>
										<!-- <s1> -->
											<div class="starg" style="background-color: #52CC87;">
												<p style="color: #FFFFFF;">&nbsp; &nbsp;#置顶#&nbsp;&nbsp; &nbsp;</p>
											</div>
											<div class="starg">
												<p style="color: #FFFFFF;">&nbsp; &nbsp;#图文#&nbsp;&nbsp; &nbsp;</p>
											</div>
											<br>
										</s>
										<br>
										<p style="letter-spacing:1px">{{value.title}}</p>
										<br>
										<img style="width: 100%;" :src="value.authorheaderImg" >
										<br>
									</div>
									<br>
									<div class="dynamic">
										<img class="dynamic_dow" src="img/liaotian.svg" alt=""> <span>999</span>
										&nbsp;&nbsp;&nbsp;
										<img class="dynamic_dow" src="img/redupaixu.svg" alt=""> <span>999</span>
									</div>
									<br>
									<hr style="width: 95%;margin: auto;">
									<br>
								</div>
							<!-- </a> -->
			<!-- ********************************************************************************************************************* -->	
							<a href="#" onclick="return check()">
								<div style="background-color: #FFFFFF;">
									<br>
									<div class="dynamic">
										<div>
											<img class="dynamic_head" src="img/people.jpg" alt="">
										</div>
										<div>
											&nbsp;&nbsp;2019-12-10
										</div>
										<br><br>
										<!-- </s1> -->
											<div class="starg">
												<p style="color: #FFFFFF;">&nbsp; &nbsp;#视频#&nbsp;&nbsp; &nbsp;</p>
											</div>
											<br>
										</s>
										<br>
										<p style="letter-spacing:1px">放个小视频</p>
										<br>
										<video title="video" src="
										http://image.jxfcwl.top/myblog-video/4e59689b3cabb9a038b12b59ab2b78b1_1280x720.mp4
										" width="98%" controls ></video>
									</div>
									<br>
									<div class="dynamic">
										<img class="dynamic_dow" src="img/liaotian.svg" alt=""> <span>999</span>
										&nbsp;&nbsp;&nbsp;
										<img class="dynamic_dow" src="img/redupaixu.svg" alt=""> <span>999</span>
									</div>
									<br>
									<hr style="width: 95%;margin: auto;">
									<br>
								</div>
							</a>	
						</div>
						<div class="below-right">
								<div style="background: #FFFFFF;">
									<br>
									<div id="circle" style="background-color: #FC625D;"></div>
									<div id="circle" style="background-color: #FDBC40;"></div>
									<div id="circle" style="background-color: #35CD4B;"></div>
									<div class="subtitle">
										&nbsp;&nbsp;个人信息
									</div>
									<br>
									
									<div class="message">
										<p><i class="layui-icon layui-icon-username"></i>&nbsp;昵称:{{user.uname}}</p>
										<p><i class="layui-icon layui-icon-male"></i>&nbsp;性别:{{user.sex}}</p>
										<p><i class="layui-icon layui-icon-date"></i>&nbsp;年龄:{{user.age}}</p>
										<p><i class="layui-icon layui-icon-login-qq"></i>&nbsp;QQ:{{user.eml}}</p>
										<br>
										<button type="button" @click="modify()">修改个人信息</button>
									</div>
									<br>
									<br>
								</div>
								<br>
								<div style="background-color: #FFFFFF">
									<br>
									<div id="circle" style="background-color: #FC625D;"></div>
									<div id="circle" style="background-color: #FDBC40;"></div>
									<div id="circle" style="background-color: #35CD4B;"></div>
									<div class="subtitle">
										&nbsp;&nbsp;动态
									</div>
									<!-- 这里的flex布局是居中,你可以在main.css中搜索一下 live 然后修改方向,我个人比较喜欢居中,哈哈 -->
									<div class="live">
										<a href="#"><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1198854719,4294312191&fm=11&gp=0.jpg" alt="图片加载失败"></a>
										<a href="#"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2697257871,2645712076&fm=11&gp=0.jpg" alt="图片加载失败"></a>
										<a href="#"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2338069061,770258175&fm=11&gp=0.jpg" alt="图片加载失败"></a>
									</div>
									<br>
								</div>
							<br>
							<div style="background-color: #FFFFFF">
								<br>
								<div id="circle" style="background-color: #FC625D;"></div>
								<div id="circle" style="background-color: #FDBC40;"></div>
								<div id="circle" style="background-color: #35CD4B;"></div>
								<div class="subtitle">
									&nbsp;&nbsp;最新评论
								</div>
								<div class="comment">
									<a href="#"><img class="new_comment" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1198854719,4294312191&fm=11&gp=0.jpg" alt="图片加载失败"></a>
									<a href="#"><img class="new_comment" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2697257871,2645712076&fm=11&gp=0.jpg" alt="图片加载失败"></a>
									<a href="#"><img class="new_comment" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2338069061,770258175&fm=11&gp=0.jpg" alt="图片加载失败"></a>
									<a href="#"><img class="new_comment" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1198854719,4294312191&fm=11&gp=0.jpg" alt="图片加载失败"></a>
									<a href="#"><img class="new_comment" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2697257871,2645712076&fm=11&gp=0.jpg" alt="图片加载失败"></a>
									<a href="#"><img class="new_comment" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2338069061,770258175&fm=11&gp=0.jpg" alt="图片加载失败"></a>
									<a href="#"><img class="new_comment" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1198854719,4294312191&fm=11&gp=0.jpg" alt="图片加载失败"></a>
									<a href="#"><img class="new_comment" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2697257871,2645712076&fm=11&gp=0.jpg" alt="图片加载失败"></a>
									<a href="#"><img class="new_comment" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2338069061,770258175&fm=11&gp=0.jpg" alt="图片加载失败"></a>
								</div>
								<br>
							</div>
							<br>
							<!-- 每日音乐 -->
							<div style="background: #FFFFFF;">
								<br>
								<div id="circle" style="background-color: #FC625D;"></div>
								<div id="circle" style="background-color: #FDBC40;"></div>
								<div id="circle" style="background-color: #35CD4B;"></div>
								<div class="subtitle">
									&nbsp;&nbsp;每日音乐
								</div>
								<br>
								<div style="text-align: center;">
									<img style="width: 90%;" src="img/20180723133705_eimsg.gif" alt="">
									<br><br>
									<audio class="audio" style="width: 90%;text-align: center;" src="https://img.jinsom.cn/user_files/12551/bg-music/music_1530776683.mp3" controls></audio>
								</div>
								<br>
								<br>
							</div>
						</div>
					</div>
					
					<br>	
					<div style="text-align: center;">
						<span>Sunshine&nbsp;人来人往&nbsp;&nbsp;&nbsp;</span><a href="http://beian.miit.gov.cn/" style="color: #6D6D6D;">苏ICP备19025063号-2</a>
					</div>
					<br>
					<div id="aplayer"></div>
		</div>
	</body>
	<script src="js/jquery-3.4.1.min.js"></script>
	<script src="js/main.js"></script>
	<script src="layui/layui.js"></script>
	<script src="js/APlayer.min.js"></script>
	
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
	<script>
		layui.use('carousel', function(){
		  var carousel = layui.carousel;
		  //建造实例
		  carousel.render({
		    elem: '#lunbo'
		    ,width: '100%' ,//设置容器宽度,
			height:'85%',
			arrow:"none", // 是否显示箭头
			indicator:"none"  //是否显示点点点
		    ,anim: 'updown' //切换动画方式
		  });
		});
		
		
		layui.use('carousel', function(){
		  var carousel = layui.carousel;
		  //建造实例
		  carousel.render({
		    elem: '#inform'
		    ,width: '100%' ,//设置容器宽度,
			height:'38px',
			arrow:"none", // 是否显示箭头
			indicator:"none"  //是否显示点点点
		    ,anim: 'updown' //切换动画方式
		  });
		});
		// 阻止a标签中video元素跳转
		function check(e){
		   return (e||event).target.title!="video";
		}
		
		// 播放器
		const ap = new APlayer({
		    container: document.getElementById('aplayer'),
			fixed: true,
		    audio: [
			{
		        name: '长生诀',
		        artist: '未知',
		        url: 'http://image.jxfcwl.top/myblog-video/%E8%A5%BF%E7%93%9CJUN%20-%20%E9%95%BF%E7%94%9F%E8%AF%80.mp3',
		        cover: 'http://image.jxfcwl.top/myblog-video/9c774d91gy1ft4lhr5vbmg20jp08okbw.gif'
		    }
			]
		});
	</script>
	
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data:{
				nav:1,
				user:{
					id:'',
					uname:'周先生',
					age:'',
					sex:'',
					address:'',
					birthday:'',
					headImg:'',
					eml:'',
					nickName:''									
										},
			// h获取全部的文章
				objectArray:[],
				
				// 用来判断用户是否登录
				loginTrue:0,
				//最新文章获取
				Latest_article:[],
				// 点赞排行文章
				HeatRankingArticle:[]
			},
			methods:{
				// 获取全部文章
				getAllArtcle(){
						 axios
						 .post('http://localhost:8080/getAllArticle',{
							
						 })
						  .then(res=>{
							  console.log("获取全部的文章")
							  this.objectArray=JSON.parse(JSON.stringify(res.data.data));
							  console.log(this.objectArray)
							  this.getLatest_article();
							  
						  })
				},
				getLatest_article(){
					console.log("根据时间获取前6篇")
					 axios
					 .post('http://localhost:8080/getLatestArticle',{						
					 })
					  .then(res=>{
						  // console.log("成功返回")
						  // this.Latest_article=JSON.parse(JSON.stringify(res.data.data));
						  // console.log(this.Latest_article)
						  this.Latest_article=JSON.parse(JSON.stringify(res.data.data));
						  this.get_HeatRankingArticle();
					  })
				},
				get_HeatRankingArticle()
				{
					
						console.log("根据点赞获取前6篇")
						 axios
						 .post('http://localhost:8080/getHeatRankingArticle',{
							
						 })
						  .then(res=>{
							  
							  this.HeatRankingArticle=JSON.parse(JSON.stringify(res.data.data));
							  // console.log(this.HeatRankingArticle)
							  
						  })
				},
				//点击跳转到对应的界面
				jump(Object){
					console.log(Object)		
					alert(Object);
					
					sessionStorage.setItem("artcle", Object);
					 window.location='artclebody.html';
				},
				modify(){
					window.localStorage='';
				}
					
				
				
	
			},
			created:function(){
				this.user=JSON.parse(sessionStorage.getItem("user"));
				if(this.user!=null)
				{this.loginTrue=1;}
				console.log(this.user);
				this.getAllArtcle();
				
				
			}
		})
	</script>
</html>
